<template>
  <div>
    <van-nav-bar
      title="周报"
      right-text="详情"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-form @submit="onSubmit">
      <!-- <van-cell title="选择单个日期" :value="date" @click="show = true" />
      <van-calendar v-model="show" @confirm="onConfirm" /> -->

      <van-field
        class="riqi"
        readonly
        clickable
        name="calendar"
        :value="value"
        label="提交日期："
        placeholder="选择日期"
        :rules="[{ required: true}]"
        @click="showCalendar = true"
      />
      <van-calendar
        color="#1989fa"
        v-model="showCalendar"
        @confirm="onConfirm"
      />
      <van-cell-group>
        <van-field
          name="class_name"
          v-model="class_name"
          label="班级："
          :rules="[{ required: true}]"
          placeholder="例：2110-H5班"
        />
      </van-cell-group>
      <p style="padding: 5%">本周知识点：</p>
      <van-field
        v-model="message"
        name="content"
        rows="1"
        style="height: 300px"
        autosize
        type="textarea"
        :rules="[{ required: true}]"
        placeholder="请填写周报"
      />

      <van-field name="rate" label="本周教师评价">
        <template #input>
          <van-rate v-model="rate" />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      value: "",
      date: "",
      class_name: "",
      user_name: "",
      show: false,
      message: "",
      showCalendar: false,
      rate: 0,
    };
  },
  mounted() {
    this.userId = localStorage.getItem("userId");
    this.axios({
      url:"http://localhost:3000/query_data",
      method:"post",
      data:{
          userID:this.userId
      }
    }).then((res)=>{
      console.log(res)
      this.user_name=res.data[0].user_name
    })
    
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      console.log("submit", values);
      console.log()
      
      const rate=values.rate
      if(rate>=1){
          this.axios({
        url: "http://localhost:3000/weekly",
        method: "post",
        data: {
          data: values,
          user_id:this.userId,
          user_name:this.user_name
        },
        processData: false,
        contentType: false,
      }).then((res)=>{
        if(res.data.affectedRows==1){
            this.$router.push("weekly")
        }
      })
      }
      
    },

    onConfirm(date) {
      this.value = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showCalendar = false;
    },
  },
};
</script>

<style scoped>
/deep/input {
  text-align: right;
}
</style>